<template>
  <span>{{counter}}</span>
</template>

<script>
export default {
  name: 'VCount',
  data() {
    return {
      counter: this.from,
      finished: false
    }
  },
  mounted() {
    const count = this.from < this.to ? this.ascending : this.descending
    const time = setInterval(() => {
      this.finished ? clearInterval(time) : count()
    }, 1000)
  },
  props: {
    from: {
      type: Number,
      required: true
    },
    to: {
      type: Number,
      required: true
    }
  },
  methods: {
    descending() {
      if (this.counter-- <= this.to) {
        this.finished = true
        this.$emit('finish')
      }
    },
    ascending() {
      if (this.counter++ >= this.to) {
        this.finished = true
        this.$emit('finish')
      }
    }
  }
}
</script>

<style scoped>

</style>
